<template>
  <Layout>
    <div class="p-4">
      <a-card title="设备数据" :key="id">
        <div class="flex w-full gap-2 mb-4" v-if="loaded">
          <div
            class="flex items-center p-3 bg-gray-100 rounded shadow-md cursor-pointer hover:shadow-inner"
            @click="goPrePage"
          >
            <ArrowLeftOutlined class="text-gray-700" />
          </div>
          <div
            class="grid flex-grow gap-4 device-data-page sm:grid-cols-2 xl:grid-cols-4"
          >
            <DeviceDataModal
              v-for="item in showDeviceDataList"
              :key="item.id"
              :data="item"
            />
          </div>
          <div
            class="flex items-center p-3 bg-gray-100 rounded shadow-md cursor-pointer hover:shadow-inner"
            @click="goNextPage"
          >
            <ArrowRightOutlined class="text-gray-700" />
          </div>
        </div>
        <div class="flex justify-center" v-if="loaded">
          <a-pagination
            class=""
            :show-size-changer="false"
            :current="current"
            :pageSize="12"
            :total="dataLength"
            @change="sizeChange"
          />
        </div>
        <div v-else class="flex items-center justify-center bg-gray-200 h-96">
          <a-spin size="large" />
        </div>
      </a-card>
    </div>
    <AddDataModal />
  </Layout>
</template>

<script lang="ts">
import Layout from "@/layout/index.vue";
import { DeviceData } from "device";
import { computed, defineComponent, onBeforeMount, provide, ref } from "vue";
import { listDeviceData } from "@/controller/Data";
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons-vue";
import DeviceDataModal from "@/components/modals/DeviceDataModal.vue";
import AddDataModal from "@/components/modals/AddDataModal.vue";

export default defineComponent({
  name: "DeviceDataPage",
  components: {
    Layout,
    DeviceDataModal,
    ArrowLeftOutlined,
    ArrowRightOutlined,
    AddDataModal,
  },
  setup() {
    const id = ref<number>(0);
    const deviceDataList = ref<Array<DeviceData>>([]);
    const loaded = ref<boolean>(false);
    const load = async () => {
      loaded.value = false;
      deviceDataList.value = await listDeviceData();
      loaded.value = true;
    };
    onBeforeMount(async () => {
      load();
    });

    const current = ref<number>(1);
    const dataLength = computed(() => deviceDataList.value.length);
    const pageLength = computed(() => Math.ceil(dataLength.value / 12));
    const showDeviceDataList = computed(() => {
      return deviceDataList.value.slice(
        (current.value - 1) * 12,
        current.value * 12
      );
    });
    const goPrePage = () => {
      if (current.value > 1) current.value--;
    };
    const goNextPage = () => {
      if (current.value < pageLength.value) current.value++;
    };
    const sizeChange = (cur: number) => {
      current.value = cur;
    };
    const refresh = () => {
      id.value++;
      load();
    };
    provide("refresh", refresh);
    return {
      id,
      deviceDataList,
      loaded,
      current,
      showDeviceDataList,
      goPrePage,
      dataLength,
      goNextPage,
      sizeChange,
    };
  },
});
</script>

<style scoped lang="scss"></style>
